<template>
    <div class="book-nav">
         <div class="nav-600">
             <el-col :span="12">
                <el-dropdown trigger="click" @command="changeType">
                <span class="el-dropdown-link">
                    分类<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(type,index) in types"
                    :command="type"
                   :key="index" >{{type}}</el-dropdown-item>
                </el-dropdown-menu>
    </el-dropdown>
  </el-col>
         </div>
        <div class="title">智慧书籍</div>
        <div class="nav">
                <div :class="{active: type ==clickType}"  v-for="(type,index) in types"
                 @click="changeType(type)"
                  :key="index">
                {{type}}
               
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props:{
        types:{
            type:Array,
            default:[]
        }
    },
    data(){
        return{
            clickType:"全部"

        }
    },
    created(){
        this.$emit("pushtype"); 
    },
    methods:{
        changeType(type){
            if(type == this.clickType)
                return ;
            this.clickType = type;
            if(this.clickType === "全部"){
                this.$emit("pushtype");    
            }else{
                this.$emit("pushtype",this.clickType);
            }
           
        }
    }
 
}
</script>

<style lang="less"  scoped>


@media screen and (max-width:600px) {
    .book-nav{
        widows: 100% !important;
        overflow:unset;
        border:0px !important;
         position:fixed !important;
         z-index: 20 !important;
        // display: none !important;
        .nav-600{
            display: block !important;
            width: 300px !important;
        }
        .title{ 
             display: none !important;
         }
        
          .nav{
           display: none !important;
            //    overflow-x: scroll !important;
              
            //    overflow-y: hidden !important; 
           
          }
    }
    
}


.book-nav{
    padding:5px;
    // background-color: #d6d1d1;
    position: relative;
    height: 45px;
    width: 90%;
    border-bottom:1px solid #EBEEF5 ;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;
    justify-self: start;
    // line-height: 20px;
    transform: translateX(5%);
    .nav-600{
        display: none;
      }
    .title{
        font-size: 20px;
        font-weight: 700;
        transform: translateY(10px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
       
    }
        .nav{ 
        //    
        .n{
            display:inline-block;
        }
          
           margin-left:5px;
           width: 80%;
           box-sizing: border-box;
           overflow: hidden;
           height: 100%;
           div{
            transform: translateY(12px);
            cursor: pointer;
            margin-left: 5px;
            display: inline-block;
            padding: 3px;
         
             }
             div:hover{
                 font-weight: 700;
                 border-radius:4px;
                 
             }
             .active{
                 font-weight: 700;
                 border-radius:4px;
                
             }
         
        }
        




}

</style>